<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <title>商品管理</title>
        <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon">
        <link rel="stylesheet" href="css/goods.css">
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app" v-cloak>
			<table border="1px">
                <tr>
                    <th colspan=4 class="list">商品清单</th>
                </tr>
				<template v-for="(v,index) in goods">
					<tr class="tr" v-if="index==0">
						<td v-for="t in title">{{t}}</td>
					</tr>
					<tr>
						<td>{{index+1}}</td>
						<td>{{v.name}}</td>
						<td class="price">{{v.price}}</td>
						<td><img src="img/delete.png" v-on:click="del(index)" class="delete"></img></td>
                    </tr>
                </template>
                <tr>
                    <td></td>
                    <td><input type="text" name="name" v-model="name"></td>
                    <td><input type="text" name="price" v-model="price"></td>
                    <td><img src="img/add.png" v-on:click="add()" class="add"></img></td>
                </tr>
			</table>
        </div>
        <script src="js/goods.js"></script>
	</body>
	
</html>